<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script src="../../jquery.js"></script>
    <script src="./02_user.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#startTime' //指定元素
            });
        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#endTime' //指定元素
            });
        });

        let page = 1
        let size = 10
        function query(id, uname, gender, email,startTime,endTime) {
            let url = "http://47.106.66.89:8080/easy/tbl_user/page?"
            url += "&page=" + page + "&size=" + size
            if (id && id.length > 0) {
                url += "id=" + id
            }
            if (uname && uname.length > 0) {
                url += "&uname=" + uname
            }
            if (gender && gender.length > 0) {
                url += "&gender=" + gender
            }
            if (email && email.length > 0) {
                url += "&email=" + email
            }
            var $table = $("table")
            function callback(data) { // 回调函数
                buildPages(data.total)  //生成页码条
                // 清空表格中的数据
                var $trs = $("table tr")
                for (let i = $trs.length - 1; i > 0; i--) {  //从前往后删除
                    $trs.get(i).remove()
                }
                data.rows.forEach(user => {
                    console.log(user)
                    if (startTime!="" && endTime!="" && startTime!=null && endTime!=null) {
                        if (user.regtime > fmtStamp(startTime) && user.regtime < fmtStamp(endTime)) {
                            let html = `<tr id="tr${user.id}">
                                <td>${user.id}</td>
                                <td>${user.uname}</td>
                                <td style="text-align: center">${fmtDate(user.regtime)}</td>
                                <td>${user.gender == null ? "未选择" : user.gender == 1 ? "男" : "女"}</td>
                                <td>${user.email == null ? "" : user.email}</td>
                                <td>
                                    <a href="#" onclick="mod(${user.id})">修改</a>
                                    <a href="#" onclick="del(${user.id})">删除</a>
                                </td>
                            </tr>`
                            var $tr = $(html)
                            $table.append($tr)
                        }
                    } else{
                        let html = `<tr id="tr${user.id}">
                            <td>${user.id}</td>
                            <td>${user.uname}</td>
                            <td style="text-align: center">${fmtDate(user.regtime)}</td>
                            <td>${user.gender == null ? "未选择" : user.gender == 1 ? "男" : "女"}</td>
                            <td>${user.email == null ? "" : user.email}</td>
                            <td>
                                <a href="#" onclick="mod(${user.id})">修改</a>
                                <a href="#" onclick="del(${user.id})">删除</a>
                            </td>
                        </tr>`
                    var $tr = $(html)
                    $table.append($tr)
                    }
                })
            }
            //ajax方法
            $.get(url, callback)
        }

        function fmtDate(time) {
            if (!time) return ""
            let date = new Date(time)
            let ret = `${date.getFullYear()}年
                       ${fmtDateField(date.getMonth() + 1)}月
                       ${fmtDateField(date.getDate())}日 
                    `
            return ret
        }

        function fmtDateField(number) {
            return number < 10 ? "0" + number : number
        }

        function fmtStamp(str) {
            var strs = str.split("-")
            var date = new Date()
            date.setFullYear(strs[0])
            date.setMonth(strs[1])
            date.setDate(strs[2])
            return date.valueOf()
        }

        function buildPages(total) {
            // 计算总页数
            let pages = parseInt(total / size)
            if (total % size != 0) {
                pages++
            }
            let html = ""
            for (let i = 1; i <= pages; i++) {
                let style = '';
                if (i == page) {
                    style = `style='background-color:#aaa'`
                }
                html += `<span onclick="toPage(${i})" ${style}>${i}</span>`
            }
            $("#pages").html(html)
        }

        function toPage(i) {
            // 设置当前页
            page = i
            // 查询
            query(id.value, uname.value, gender.value, email.value)
        }
    </script>
</head>

<body>
    <h2 class="center">用户管理</h2>
    <form class="center">
        <label>ID:</label><input id="id">
        <label>名字:</label><input id="uname"><br>
        <label>性别:</label><input id="gender">
        <label>邮箱:</label><input id="email"><br>
        <label>起始日期：</label><input id="startTime">
        <label>结束日期：</label><input id="endTime">
        <button type="button">查询</button>
        <button type="button">新增</button>
    </form>
    <table class="center" style="margin: 10px auto;width: 70%" border="1" cellpadding="0">
        <tr>
            <th>ID</th>
            <th>用户</th>
            <th>入职时间</th>
            <th>性别</th>
            <th>邮箱</th>
        </tr>
    </table>

    <div id="pages" class="center" style="text-align:right">
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>

    <div id="dialog">
        <div>
            <h3>用户信息编辑</h3>
            <hr>
            <form>
                <label>ID:</label><input id="iptId"><span></span><br>
                <label>名字:</label><input id="iptName"><span></span><br>
                <label>性别:</label><input id="iptGender"><span></span><br>
                <label>邮箱:</label><input id="iptEmail"><span></span><br>
                <div style="text-align: center">
                    <button type="button">保存</button>
                    <button type="button">关闭</button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

<style>
    #pages>span {
        display: inline-block;
        padding: 3px 5px;
        width: 25px;
        background-color: #ccc;
        margin: 3px;
        text-align: center;
        border-radius: 3px;
        cursor: pointer;
    }

    .center {
        margin: 10px auto;
        width: 70%;
    }

    #dialog {
        width: 100%;
        height: 100%;
        background-color: #0005;
        position: absolute;
        top: 0px;
        display: none;
    }

    #dialog>div {
        width: 600px;
        height: 300px;
        margin: 100px auto;
        background-color: #eee;
    }

    #dialog>div>h3 {
        padding: 10px;
        margin: 0;
    }

    #dialog>div>form {
        padding: 20px 50px;
        line-height: 50px;
    }

    #dialog>div>form * {
        vertical-align: center;
    }

    #dialog>div>form>label {
        display: line-block;
        width: 100px;
    }

    #dialog form span {
        color: red;
    }
</style>